<template>
  <div class="search">
    <span class="icon"
      ><span class="material-symbols-outlined"> search </span></span
    >
    <input class="input" :placeholder="placeholder" />
  </div>
</template>

<script setup>
import { defineProps, toRefs } from 'vue'
const props = defineProps(['placeholder'])
const { placeholder } = toRefs(props)
</script>

<style scoped lang="scss">
.search {
  position: relative;
  display: flex;
  height: dpi(11rem);
  margin: 0 dpi(4rem);
  margin-top: dpi(4rem);
  background-color: #ffffff;
  box-shadow: 0rem dpi(1rem) dpi(3rem) 0rem rgba(5, 32, 77, 0.1);
  z-index: 1;
  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: dpi(10rem);
    .material-symbols-outlined {
      font-size: dpi(4rem);
      color: #05204d;
    }
  }
  .input {
    outline: none;
    border: none;
    height: 100%;
    flex: 1;
    font-family: PingFangSC-Regular;
    font-size: dpi(3rem);

    &::placeholder {
      color: #b3b3b3;
    }
    color: #05204d;
  }
}
</style>
